<template>
  <div>
    <el-drawer
      v-model="drawer"
      ref="drawerRef"
      :title="title"
      v-bind="$attrs"
      :before-close="handleClose"
      :close-on-click-modal="closeOnClickModal"
      :close-on-press-escape="closeOnPressEscape"
      :size="size"
      :with-header="withHeader"
    >
      <template v-for="(value, name) in $slots" :key="name" #[name]="slotData">
        <slot :name="name" v-bind="slotData || {}"></slot
      ></template>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance, nextTick, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRoute, useRouter } from "vue-router";
import { onMounted } from "vue";
import { useSlots } from "vue";
const { proxy } = getCurrentInstance();
// 路径参数
const route = useRoute();
//  路由
const router = useRouter();
const emit = defineEmits(["close"]);

const props = defineProps({
  // 弹窗标题
  title: {
    type: String,
    default: "标题",
  },
  // 弹窗内容
  content: {
    type: String,
    default: "内容",
  },
  // 弹窗方向
  // direction: {
  //   type: String,
  // },
  closeOnClickModal: {
    default: true,
  },
  closeOnPressEscape: {
    default: true,
  },
  size: {
    default: "40%",
  },
  withHeader: {
    default: true,
  },
});

// 声明成 defineModel
const drawer = defineModel();
const drawerRef = ref();
const handleClose = (done: () => void) => {
  done();
  emit("close");
};

// onMounted(() => {
//   // for (const key in drawerRef.value) {
//   //   key = drawerRef.value[key];
//   // }
//   console.log("父组件的插槽:", useSlots());
// });
// 向父组件暴露子组件的Expose 方法（如果父组件中有相同的方法则会出错）
// const exposedMethods = {};

// onMounted(() => {
//   const entries = Object.entries(drawerRef.value);
//   for (const [key, value] of entries) {
//     exposedMethods[key] = value;
//   }
// });
// defineExpose(exposedMethods);
</script>

<style lang="scss" scoped></style>
